.player{
  width: 400px;
  height: calc(15vh - 20px);
  position: relative;
  font-size: 14px;
}
.player-left{
  display: flex;
  justify-content: flex-start;
}
.player-right{
  display: flex;
  justify-content: flex-end;
  text-align: right;
}

.number{
  width: 15vh;
  height: 15vh;
  border: 2px solid;
  border-radius: 100%;
  text-align: center;
  line-height: 13vh;
  font-size: 10vh;
  background-color: #141414;
  box-shadow: inset 5px 5px 10px #080808, 
              inset -5px -5px 10px #202020;
}

.villager .ant-card{
  background-color: #576574;
}
.villager  .number{
  background-color: #576574;
  box-shadow: inset 5px 5px 16px #2e363d, 
              inset -5px -5px 16px #8094ab;
}

.wolf .ant-card{
  background-color: #7e2b2c;
}
.wolf  .number{
  background-color: #7e2b2c;
  box-shadow: inset 5px 5px 16px #431717, 
              inset -5px -5px 16px #b93f41;
}

.prophet .ant-card{
  background-color: #056478;
}
.prophet  .number{
  background-color: #056478;
  box-shadow: inset 5px 5px 6px #044856, 
              inset -5px -5px 6px #06809a;
}

.witch .ant-card{
  background-color:#5f27cd;
}
.witch  .number{
  background-color: #5f27cd;
  box-shadow: inset 5px 5px 16px #32156d, 
              inset -5px -5px 16px #8c39ff;
}

.hunter .ant-card{
  background-color:#875424;
}
.hunter  .number{
  background-color: #875424;
  box-shadow: inset 5px 5px 16px #482d13, 
              inset -5px -5px 16px #c67b35;
}

.guard .ant-card{
  background-color:#10ac84;
}
.guard  .number{
  background-color: #10ac84;
  box-shadow: inset 5px 5px 16px #085b46, 
            inset -5px -5px 16px #18fdc2;
}

.number-left{
  position: absolute;
  right: -7.5vh;
  top: -10px;
}

.number-right{
  position: absolute;
  left: -7.5vh;
  top: -10px;
}

.ant-card-body{
  padding: 5px;
}

.info{
  display: flex;
  flex-direction: column;
  
}


.info-base label{
  margin: 0 5px;
  font-size: 14px;
}
.rate{
  font-size: 16px;
  color:#c8d6e5;
}

.textarea, .textarea:hover, .textarea:focus{
  font-size: 14px;
  box-shadow: inset 5px 5px 16px #0b0b0b;
  outline: none;
  max-height: 53px;
  min-height: 53px;
  width: 300px;
  max-width: 300px;
}


.tags-right{
  position: absolute;
  top:20px;
  right: -10vh;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tags-left{
  position: absolute;
  top:20px;
  left: -10vh;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ant-tag-has-color, .ant-tag-has-color a, .ant-tag-has-color a:hover, .ant-tag-has-color .anticon-close, .ant-tag-has-color .anticon-close:hover {
  color: #080808;
  font-weight: bold;
  margin-top: 5px;
}

textarea .ant-input{
  width: 300px;
}